<template>
  <div v-if="filters.length>0">
    <div v-if="type==='left'" class="mt10">
      <span class="pd10 fs18">{{ filters[currIndex].name }}</span>
      <span class="fs14 ml10 mr10">共{{ filters[currIndex].count }}条</span>
    </div>
    <div class="fs14" :class="{pd15:type==='left'}">
      <div v-if="type==='left'" class="pl10 mb10 info">选择视图</div>
      <div
        :class="{curr:i===currIndex}"
        class="flx-b filter"
        v-for="(f,i) in filters"
        :key="`filter_v1_${i}`"
        @click="toFilter(i)">
        <div>{{ f.name }}</div>
        <div>{{ f.count }}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    type: {
      type: String,
      default: 'top'
    },
    filters: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      currIndex: 0
    }
  },
  mounted () {
  },
  methods: {
    toFilter (i) {
      this.currIndex = i
      this.$emit('ok', this.filters[i])
    }
  }
}
</script>

<style lang="scss" scoped>
  .filter{
    padding:4px 10px;
    border-radius:3px;
    margin-bottom:4px;
    &.curr{
      background:#409EFF;
      color:#fff;
    }
    &:hover{
      cursor:pointer;
      color:#fff;
      background:#409EFF;
    }
  }
</style>
